<template>
  <div class="MusicList">
    <div class="musicTop">
      <div class="musicFind">发现好歌单</div>
      <div class="musicMore">查看更多</div>
    </div>
    <div class="musicSwiper">
      <van-swipe
        :loop="false"
        :width="150"
        :show-indicators="false"
        class="mySwiper"
      >
        <van-swipe-item v-for="item in musicList" :key="item">
          <router-link :to="{ path: '/ItemMusic', query: { id: item.id } }">
            <img :src="item.picUrl" alt="" />
            <span class="playCount">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gl-play"></use>
              </svg>
              <span>{{ changCount(item.playCount) }}</span>
            </span>
            <span class="name"> {{ item.name }} </span>
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
import { getMusicList } from "@/request/api/home";
export default {
  data() {
    return {
      musicList: [],
    };
  },
  methods: {
    getMusicList() {
      getMusicList().then((res) => {
        console.log(res.data);
        this.musicList = res.data.result;
      });
    },
    //播放数据的处理
    changCount(num) {
      if (num > 100000000) {
        return (num / 10000000).toFixed(1) + "亿";
      } else if (num > 10000) {
        return (num / 10000).toFixed(1) + "万";
      }
    },
  },
  mounted() {
    this.getMusicList();
  },
};
</script>
<style lang="less" scoped>
.MusicList {
  width: 100%;
  height: 5rem;
  padding: 0.2rem;
  .musicTop {
    width: 100%;
    height: 0.2rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.2rem;
    .musicFind {
      font-weight: 900;
      font-size: 0.4rem;
    }
    .musicMore {
      border: 0.02rem solid black;
      padding: 0.1rem 0.2rem;
      text-align: center;
      border-radius: 0.4rem;
      height: 0.6rem;
    }
  }
  .mySwiper {
    width: 100%;
    height: 4rem;
    margin-top: 0.4rem;
    .van-swipe-item {
      position: relative;
      img {
        width: 100%;
        height: 3rem;
        padding: 0.2rem;
        border-radius: 0.3rem;
      }
      .playCount {
        position: absolute;
        top: 0.2rem;
        right: 0.6rem;
        font-size: 0.2rem;
        color: #ffffff;
        .icon {
          fill: #fff;
          position: absolute;
          right: 40px;
          top: 0.2rem;
        }
        span {
          position: absolute;
          right: 0.1rem;
          top: 0.2rem;
        }
      }
      .name {
        padding: 0 rem;
      }
    }
  }
}
</style>
